<template>
    <div class="f-sheet">
        <!--表单选项-->
        <div class="f-cell"
             @click="handleSelectMenu">
            <span class="f-cell-bd">{{ title }}</span>
            <span class="f-cell-ft f-cell-none" v-if="!value">{{ placeholder }}</span>
            <span class="f-cell-ft" v-if="value">{{ value }}</span>
        </div>
        <!--点击弹出的sheet-->
        <transition name="vux-actionsheet-mask">
            <div class="weui-mask weui-mask_transparent"
                 @click="onClickingMask"
                 v-show="show"></div>
        </transition>
        <div class="f-actionsheet"
             :class="{'f-actionsheet-toggle': show}">
            <div class="f-actionsheet-menu">
                <div class="f-actionsheet-cell vux-1px-b"
                     v-for="(menuItem, index) in menus"
                     :key="index"
                     @click="onMenuClick(menuItem, index)">
                    <p>{{ menuItem.name }}</p>
                    <p v-if="menuItem.tip">{{ menuItem.tip }}</p>
                </div>
            </div>
            <div class="f-actionsheet-action"
                 @click="onMenuClick('cancel')">
                <div class="f-actionsheet-cell">取消</div>
            </div>
        </div>
    </div>
</template>

<script>
    /**
     * Created by c.y on 2018/3/16.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * 全局表单选择，弹窗sheet的组件
     *  menus: [
         {
             name: '等本等息',
             tip: '月供，本金，利息每月相同' // 可选
         }
     ],
     */
    export default {
        name: 'f-sheet',
        data () {
            return {
                show: false
            }
        },
        methods: {
            // 点击表单选择
            handleSelectMenu () {
                this.show = true;
            },
            // 点击遮罩
            onClickingMask () {
                this.show = false;
            },
            // 点击item
            onMenuClick (menuItem) {
                this.show = false;
                // 点击取消的话
                if (menuItem === 'cancel') {
                    return false;
                }
                // 这里双向数据绑定，监听这个事件，被传递的这个值，赋值给value
                this.$emit('on-menu-click', menuItem.name);
                this.$emit('on-menu-change', menuItem);
            }
        },
        model: {
            prop: 'value',
            event: 'on-menu-click'
            // 这个是双向数据绑定，需要监听的事件，
        },
        props: {
            // 选择的值
            value: String,
            // 提示语
            placeholder: String,
            // 左边的标题
            title: {
                type: String,
                required: true
            },
            // 下拉菜单
            menus: {
                type: Array,
                required: true
            }
        }

    }
</script>

<style lang="less">
    .f-sheet {
        padding-left: 15PX;
        .f-actionsheet {
            position: fixed;
            left: 0;
            bottom: 0;
            transform: translate(0, 100%);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 10000;
            width: 100%;
            background: @color-divider-regular;
            transition: transform .3s;
        }
        .f-actionsheet-toggle {
            transform: translate(0, 0);
        }
        .f-actionsheet-menu {
            background: @color-white;
        }
        .f-actionsheet-cell {
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: @font-size-base;
            background: @color-white;
        }
        .f-actionsheet-action {
            margin-top: 6px;
            background-color: @color-white;
        }
        .f-cell {
            position: relative;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            background: @color-white;
            &:after {
                content: " ";
                position: absolute;
                left: 10px;
                bottom: 0;
                right: 0;
                height: 1px;
                border-bottom: 1px solid @color-divider-regular;
                color: #e5e5e5;
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                z-index: 2;
            }
            .f-cell-bd {
               flex: 1;
            }
            .f-cell-ft {
                position: relative;
                padding-right: 15px;
                text-align: right;
                color: @color-text-primary;
                &:after {
                    content: " ";
                    position: absolute;
                    top: 50%;
                    right: 2px;
                    margin-top: -4px;
                    display: inline-block;
                    height: 6px;
                    width: 6px;
                    border-width: 2px 2px 0 0;
                    border-color: @color-divider-regular;
                    border-style: solid;
                    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
                    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
                }
            }
            .f-cell-none {
                color: @color-text-third;
            }
        }
    }
</style>
